<template>
    <div id="app">
        <div class="login-layout-header"></div>
        <div class="login-layout-mid">
            <LoginCard class="page-login-card" :back-url="backUrl"></LoginCard>
        </div>
        <div class="login-layout-footer"></div>
    </div>
</template>

<script>
import LoginCard from "@/components/LoginCard";

export default {
  name: "app",
  data() {
    return {
      backUrl: "home.html"
    };
  },
  components: {
    LoginCard: LoginCard
  }
};
</script>

<style>
html,
body,
#app {
  height: 100%;
  min-height: 660px;
}

.login-layout-header {
  width: 100%;
  height: 300px;
  background: url(http://172.16.176.155/portal/static/images/login_header_bg.png)
    center bottom;
}

.login-layout-mid {
  min-height: 200px;
  height: calc(100% - 380px);
  position: relative;
}

.login-layout-footer {
  height: 80px;
  background-color: lightseagreen;
}

.page-login-card {
  vertical-align: middle;
  margin: 0 auto;
  position: relative;
  top: calc(50% - 130px);
}
</style>
